<template>
        <Header title="订单"/>
<div class="content">

    <div class="table-container">
        <table>
            <tr>
                <th>点单编号</th>
                <th>商品列表</th>
                <th>订单总价</th>
                <th>订单数量</th>
            </tr>
            <tr v-for="o in orders">
                <td>{{o.orderId}}</td>
                <td>{{o.title}}</td>
                <td>{{o.price}}</td>
                <td>{{o.count}}</td>
            </tr>
        </table>

    </div>
    <Footer />
</div>
</template>
<script setup>
    import Header from '@/components/Header.vue';
    import Footer from '@/components/Footer.vue';
    import {useOrderStore} from '@/store/OrderStore'

    const orderStore = useOrderStore()
    const orders = orderStore.orders

</script>

<style scoped>
.content {
    padding: 5vw; /* 使用视口宽度百分比作为内边距 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7fa;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-container {
    background-color: #fff;
    border-radius: 1.5vw; /* 使用视口宽度百分比作为圆角 */
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* 使用视口宽度百分比作为阴影参数 */
    overflow: hidden;
    width: 90vw; /* 使用视口宽度百分比作为宽度 */
    max-width: 1000px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #2c3e50;
    color: white;
}

th, td {
    padding: 1.5vw 2vw; /* 使用视口宽度百分比作为内边距 */
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 2vw; /* 使用视口宽度百分比作为字体大小 */
}

th {
    font-weight: 600;
}

tbody tr:hover {
    background-color: #f1f8e9;
    transition: background-color 0.3s ease;
}

tr:last-child td {
    border-bottom: none;
}

/* 假设 Footer 组件有一些样式 */
Footer {
    display: block;
    text-align: center;
    padding: 2vw; /* 使用视口宽度百分比作为内边距 */
    margin-top: 3vw; /* 使用视口宽度百分比作为外边距 */
    background-color: #2c3e50;
    color: white;
    width: 90vw; /* 使用视口宽度百分比作为宽度 */
    border-radius: 1vw; /* 使用视口宽度百分比作为圆角 */
}

/* 媒体查询，当屏幕宽度小于 768px 时调整样式 */
@media (max-width: 768px) {
    th, td {
        font-size: 3vw;
        padding: 2vw 2.5vw;
    }
}
</style>